import { useState, useEffect } from 'react';
import { Link } from 'react-router-dom';
import { useTheme } from '@/hooks/useTheme';
import { LineChart, Line, BarChart, Bar, PieChart, Pie, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer, Cell } from 'recharts';
import { cn } from '@/lib/utils';

// 模拟统计数据
const salesData = [
  { name: '1月', 销售额: 4000, 订单数: 2400, 访问量: 2400 },
  { name: '2月', 销售额: 3000, 订单数: 1398, 访问量: 2210 },
  { name: '3月', 销售额: 2000, 订单数: 9800, 访问量: 2290 },
  { name: '4月', 销售额: 2780, 订单数: 3908, 访问量: 2000 },
  { name: '5月', 销售额: 1890, 订单数: 4800, 访问量: 2181 },
  { name: '6月', 销售额: 2390, 订单数: 3800, 访问量: 2500 },
  { name: '7月', 销售额: 3490, 订单数: 4300, 访问量: 2100 },
  { name: '8月', 销售额: 4000, 订单数: 3400, 访问量: 2500 },
  { name: '9月', 销售额: 3800, 订单数: 4100, 访问量: 2300 },
  { name: '10月', 销售额: 4500, 订单数: 4800, 访问量: 2800 },
];

const categoryData = [
  { name: '电子产品', value: 45 },
  { name: '书籍资料', value: 25 },
  { name: '运动器材', value: 15 },
  { name: '家居用品', value: 10 },
  { name: '其他', value: 5 },
];

const COLORS = ['#0088FE', '#00C49F', '#FFBB28', '#FF8042', '#8884d8'];

// 模拟关键指标数据
const keyMetrics = [
  { id: 'users', title: '总用户数', value: '12,345', change: '+12.5%', icon: 'fa-users', color: 'bg-blue-100 dark:bg-blue-900 text-blue-600 dark:text-blue-400' },
  { id: 'products', title: '商品总数', value: '5,678', change: '+8.3%', icon: 'fa-box', color: 'bg-green-100 dark:bg-green-900 text-green-600 dark:text-green-400' },
  { id: 'orders', title: '总订单数', value: '3,456', change: '+15.2%', icon: 'fa-shopping-cart', color: 'bg-purple-100 dark:bg-purple-900 text-purple-600 dark:text-purple-400' },
  { id: 'revenue', title: '总销售额', value: '¥896,754', change: '+22.1%', icon: 'fa-chart-line', color: 'bg-red-100 dark:bg-red-900 text-red-600 dark:text-red-400' },
];

export default function Dashboard() {
  const [isLoading, setIsLoading] = useState(true);
  const { theme } = useTheme();

  // 模拟数据加载
  useEffect(() => {
    const timer = setTimeout(() => {
      setIsLoading(false);
    }, 1000);
    
    return () => clearTimeout(timer);
  }, []);

  if (isLoading) {
    return (
      <div className="min-h-screen flex items-center justify-center bg-gray-50 dark:bg-gray-900">
        <div className="text-center">
          <div className="inline-block animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-indigo-500"></div>
          <p className="mt-4 text-gray-600 dark:text-gray-400">加载中...</p>
        </div>
      </div>
    );
  }

  return (
    <div className={cn("min-h-screen bg-gray-50 dark:bg-gray-900")}>
      {/* 顶部导航 */}
      <header className="bg-white dark:bg-gray-800 shadow-sm sticky top-0 z-10">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex justify-between items-center h-16">
            <div className="flex items-center">
              <i className="fa-solid fa-tachometer-alt text-indigo-600 dark:text-indigo-400 text-2xl mr-2"></i>
              <span className="text-xl font-bold text-gray-900 dark:text-white">管理后台</span>
            </div>
            
            <div className="flex items-center">
              <span className="text-sm text-gray-600 dark:text-gray-400 mr-4">欢迎，管理员</span>
              <div className="w-8 h-8 rounded-full bg-gray-200 dark:bg-gray-700 flex items-center justify-center">
                <i className="fa-solid fa-user-shield text-gray-600 dark:text-gray-300"></i>
              </div>
            </div>
          </div>
        </div>
      </header>
      
      {/* 主体内容 */}
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
          {keyMetrics.map((metric) => (
            <div 
              key={metric.id}
              className="bg-white dark:bg-gray-800 rounded-xl shadow-sm p-6 border border-gray-200 dark:border-gray-700 hover:shadow-md transition-shadow"
            >
              <div className="flex justify-between items-start">
                <div>
                  <p className="text-sm text-gray-500 dark:text-gray-400">{metric.title}</p>
                  <h3 className="text-2xl font-bold text-gray-900 dark:text-white mt-1">{metric.value}</h3>
                  <p className={`text-xs mt-1 ${metric.change.startsWith('+') ? 'text-green-600 dark:text-green-400' : 'text-red-600 dark:text-red-400'}`}>
                    {metric.change} 较上月
                  </p>
                </div>
                <div className={`w-10 h-10 rounded-full ${metric.color} flex items-center justify-center`}>
                  <i className={`fa-solid ${metric.icon}`}></i>
                </div>
              </div>
            </div>
          ))}
        </div>
        
        {/* 图表区域 */}
        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
          {/* 销售趋势图 */}
          <div className="bg-white dark:bg-gray-800 rounded-xl shadow-sm p-6 border border-gray-200 dark:border-gray-700 lg:col-span-2">
            <div className="flex justify-between items-center mb-6">
              <h3 className="text-lg font-bold text-gray-900 dark:text-white">销售趋势</h3>
              <div className="relative">
                <select className="appearance-none bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 py-2 px-4 pr-8 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500">
                  <option>近10个月</option>
                  <option>近6个月</option>
                  <option>近3个月</option>
                  <option>本月</option>
                </select>
                <i className="fa-solid fa-chevron-down absolute right-3 top-1/2 transform -translate-y-1/2 text-xs text-gray-500 dark:text-gray-400 pointer-events-none"></i>
              </div>
            </div>
            <div className="h-80">
              <ResponsiveContainer width="100%" height="100%">
                <LineChart data={salesData} margin={{ top: 5, right: 30, left: 20, bottom: 5 }}>
                  <CartesianGrid strokeDasharray="3 3" stroke={theme === 'dark' ? '#374151' : '#e5e7eb'} />
                  <XAxis dataKey="name" stroke={theme === 'dark' ? '#9ca3af' : '#6b7280'} />
                  <YAxis stroke={theme === 'dark' ? '#9ca3af' : '#6b7280'} />
                  <Tooltip 
                    contentStyle={{ 
                      backgroundColor: theme === 'dark' ? '#1f2937' : '#ffffff',
                      borderColor: theme === 'dark' ? '#374151' : '#e5e7eb',
                      color: theme === 'dark' ? '#f9fafb' : '#111827'
                    }}
                  />
                  <Legend />
                  <Line type="monotone" dataKey="销售额" stroke="#8884d8" activeDot={{ r: 8 }} strokeWidth={2} />
                  <Line type="monotone" dataKey="订单数" stroke="#82ca9d" strokeWidth={2} />
                </LineChart>
              </ResponsiveContainer>
            </div>
          </div>
          
          {/* 商品分类分布 */}
          <div className="bg-white dark:bg-gray-800 rounded-xl shadow-sm p-6 border border-gray-200 dark:border-gray-700">
            <div className="flex justify-between items-center mb-6">
              <h3 className="text-lg font-bold text-gray-900 dark:text-white">商品分类分布</h3>
              <button className="text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300">
                <i className="fa-solid fa-ellipsis"></i>
              </button>
            </div>
            <div className="h-80">
              <ResponsiveContainer width="100%" height="100%">
                <PieChart>
                  <Pie
                    data={categoryData}
                    cx="50%"
                    cy="50%"
                    labelLine={false}
                    outerRadius={80}
                    fill="#8884d8"
                    dataKey="value"
                    label={({ name, percent }) => `${name} ${(percent * 100).toFixed(0)}%`}
                  >
                    {categoryData.map((entry, index) => (
                      <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
                    ))}
                  </Pie>
                  <Tooltip 
                    contentStyle={{ 
                      backgroundColor: theme === 'dark' ? '#1f2937' : '#ffffff',
                      borderColor: theme === 'dark' ? '#374151' : '#e5e7eb',
                      color: theme === 'dark' ? '#f9fafb' : '#111827'
                    }}
                  />
                </PieChart>
              </ResponsiveContainer>
            </div>
          </div>
        </div>
        
        {/* 管理快捷入口 */}
        <div className="bg-white dark:bg-gray-800 rounded-xl shadow-sm p-6 border border-gray-200 dark:border-gray-700">
          <h3 className="text-lg font-bold text-gray-900 dark:text-white mb-6">管理快捷入口</h3>
          
          <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4">
            {[
              { id: 'products', title: '商品管理', icon: 'fa-box', color: 'bg-blue-100 dark:bg-blue-900 text-blue-600 dark:text-blue-400', route: '/admin/products' },
              { id: 'orders', title: '订单管理', icon: 'fa-shopping-cart', color: 'bg-green-100 dark:bg-green-900 text-green-600 dark:text-green-400', route: '/admin/orders' },
              { id: 'users', title: '用户管理', icon: 'fa-users', color: 'bg-purple-100 dark:bg-purple-900 text-purple-600 dark:text-purple-400', route: '/admin/users' },
              { id: 'categories', title: '分类管理', icon: 'fa-tags', color: 'bg-red-100 dark:bg-red-900 text-red-600 dark:text-red-400', route: '/admin/categories' },
              { id: 'comments', title: '评论管理', icon: 'fa-comment', color: 'bg-yellow-100 dark:bg-yellow-900 text-yellow-600 dark:text-yellow-400', route: '/admin/comments' },
              { id: 'settings', title: '系统设置', icon: 'fa-cog', color: 'bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-400', route: '/admin/settings' },
            ].map((item) => (
              <Link
                key={item.id}
                to={item.route}
                className="flex flex-col items-center justify-center p-4 bg-gray-50 dark:bg-gray-750 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors"
              >
                <div className={`w-12 h-12 rounded-full ${item.color} flex items-center justify-center mb-3`}>
                  <i className={`fa-solid ${item.icon} text-xl`}></i>
                </div>
                <span className="text-sm font-medium text-gray-900 dark:text-gray-100">{item.title}</span>
              </Link>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}